import {View, Text, Pressable, Image, Alert} from 'react-native';
import React, {useEffect, useState} from 'react';
import {base, mallIndex} from '../service';
import Carousel from '../components/Carousel';

//所有的“路由组件”（即路由地址的组件）的props才能解构出：navigation、route
export default function MallList({navigation, route}) {
  //状态变量 —— 用户信息
  let [userInfo, setUserInfo] = useState({});
  //状态变量 —— 轮播广告数组
  let [carousels, setCarousels] = useState([]);
  //状态变量 —— 商品类别数组
  let [goodsTypes, setGoodsTypes] = useState([]);

  //生命周期方法 —— 组件挂载时
  useEffect(() => {
    //使用匿名自调函数来解决Effect方法不能添加async问题
    (async () => {
      //1.异步请求商城首页数据
      let data = await mallIndex();
      setUserInfo(data.userInfo);
      setCarousels(data.carousels);
      setGoodsTypes(data.goodsTypes);
      //2.根据查询到的用户信息修改标题栏
      navigation.setOptions({
        // title: '商城的首页',
        // headerStyle: {backgroundColor: 'red'},
        headerRight: () => {
          //标题栏右侧的内容(文字或图片)——注意：必须是一个函数返回需要的内容
          return (
            //RN中Image是没有onPress事件处理能力的
            //pop：返回历史栈中的上一页  popToTop:返回历史栈中的第一页
            <Pressable
              onPress={_ =>
                Alert.alert('提示', '您确定要退出吗？', [
                  {text: '确定', onPress: () => navigation.popToTop()},
                  {text: '取消'},
                ])
              }>
              <Image
                style={{width: 34, height: 34}}
                // source={require('../img/user1.png')}
                // source={{uri: base + userInfo.avatar}}   //userInfo异步赋值尚未生效
                source={{uri: base + data.userInfo.avatar}}
              />
            </Pressable>
          );
        },
      });
    })();
  }, []); //空依赖

  return (
    <View>
      {/* F1: 上方：轮播广告 */}
      <Carousel list={carousels} />
      {/* F2: 主体：页签组件(共有3个页签) */}
    </View>
  );
}
